<script setup>
import { useRoute, useRouter } from 'vue-router';
import { ref, onMounted, onUnmounted } from 'vue';
import { useUserStore } from '@/stores/user'
import { ElMessage, ElMessageBox } from 'element-plus';
import { getPhotoByCategory, delPhoto, concealPhoto, getVideo } from '@/api/photo'
// 实例化仓库
const userStore = useUserStore()
// 视频集合
const videoList = ref([])
const router = useRouter()
// 获取到路径参数的路由
const route = useRoute()
// 存储图片的集合
const photoList = ref([])
// 获取分类下的图片
const getCategoryPhoto = async (state) => {
  const res = await getPhotoByCategory(state, route.params.id)
  photoList.value = res.data
}
// 获取全部图片还是有bug
onMounted(() => {
  getCategoryPhoto(2)
})
// 默认激活的选项
const activeName = ref('2')
// token
const headers = ref({ 'Authorization': userStore.userInfo.token })
// 上传路径
const uploadPath = ref(null)
// 页面挂载存储路径
onMounted(() => {
  uploadPath.value = `/prod-api/admin/photo/photoUpload/${route.params.id}`
})
// 上传成功的回调
const handleAvatarSuccess = () => {
  ElMessage.success("上传成功")
  // 重新渲染
  getCategoryPhoto(2)
}
// 长按
// 时间的计算
const longPressTimer = ref(null);
const isLongPressing = ref(false);

const startLongPress = (item, state, i) => {
  isLongPressing.value = true;
  longPressTimer.value = setTimeout(() => {
    onLongPress(item, state, i);
  }, 500); // 设定长按时间为500毫秒
};

const stopLongPress = () => {
  isLongPressing.value = false;
  clearTimeout(longPressTimer.value);
};

const resetLongPress = () => {
  if (isLongPressing.value) {
    stopLongPress();
    startLongPress(); // 重置计时器
  }
};

const onLongPress = (item, state, i) => {
  let message = '图片'
  if (i != null) {
    message = '视频'
  }
  // 在这里执行长按时的操作
  ElMessageBox.confirm(`您确定要删除该${message}吗?`, `删除${message}`, {
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  }).then(async () => {

    // 删除图片
    await delPhoto({ photoUrl: item })
    // 提示用户
    ElMessage.success("删除成功!")
    if (i != null) {
      getVideoList(state)
      return
    }
    // 重新获取
    getCategoryPhoto(state)
  })
};
// 隐藏
const conceal = (item, i) => {
  let message = '图片'
  if (i != null) {
    message = '视频'
  }
  // 在这里执行长按时的操作
  ElMessageBox.confirm(`您确定要隐藏该${message}吗?`, `隐藏${message}`, {
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  }).then(async () => {
    await concealPhoto(1, { photoUrl: item })
    // 提示用户
    ElMessage.success("隐藏成功!")
    if (i != null) {
      getVideoList(2)
      return
    }
    // 重新获取
    getCategoryPhoto(2)
  })
}
// 清理可能未完成的计时器
onUnmounted(() => {
  clearTimeout(longPressTimer.value)
})
// 点击了标签页的触发
const handleClick = (item, i) => {
  console.log(i);
  if (i === 1) {
    // 转换为整形数据传给后端
    getVideoList(parseInt(item.props.name), 10)
    return
  }
  getCategoryPhoto(parseInt(item.props.name, 10))
}
// 取消隐藏
const unhide = (item, state, i) => {
  let messaeg = '图片'
  if (i != null) {
    messaeg = '视频'
  }
  // 在这里执行长按时的操作
  ElMessageBox.confirm(`您确定要显示该${messaeg}吗?`, `显示${messaeg}`, {
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  }).then(async () => {
    // 隐藏为1
    if (state === 1) {
      await concealPhoto(2, { photoUrl: item })
      if (i != null) {
        getVideoList(1)
        return
      }
      getCategoryPhoto(1)
    }
    // 当状态等于3的时候隐藏这个图片
    if (state === 3) {
      await concealPhoto(2, { photoUrl: item })
      if (i != null) {
        getVideoList(2)
        return
      }
      getCategoryPhoto(3)
    }
    // 提示用户
    ElMessage.success("显示成功!")
  })
}
// 跳转到上传视频界面
const goToPath = () => {
  router.push('/personage/photo/video')
}
// 获取视频
const getVideoList = async (state) => {
  const res = await getVideo(state)
  videoList.value = res.data
}
// // 上传封面的路径
// const coverUrl = ref()
// // 上传封面的图片
// const coverImage = ref()
// // 上传封面
// const isCover = ref(false)
// // 当前封面数据
// const currentCover = ref(null)

// // 封面的弹层可以取消了
// // 鼠标移入将当前信息存储起来
// const mouseover = async (item) => {
//   // 根据图片路径将id带过来 
//   const res = await getCover(item)
//   // 判断如果有封面不需要设置了
//   if (res.data.cover) {
//     // 直接返回就好了
//     return
//   }
//   // todo如果移入了就不可在移入了
//   // 鼠标移入将当前的图片路径存储起来
//   currentCover.value = item
//   console.log(res.data.id);
//   // 没有封面
//   // 存储当前的图片路径
//   coverUrl.value = `/api/admin/photo/coverUpload/${parseInt(res.data.id, 10)}`
// }
// // 文件上传后
// const handleAvatarSuccessCover = (response) => {
//   // 文件上传之后将数据回显
//   coverImage.value = response.data
// }
// // 点击了封面上传按钮
// const onCover = () => {
//   // 判断是否鼠标移入了数据
//   if (currentCover.value) {
//     // 可以打开
//     isCover.value = true
//     // 可以开始上传了
//     // 路径有问题
//     // 上传完毕清除信息
//     currentCover.value = ''
//     return
//   }
//   // 鼠标没移入不能打开
//   isCover.value = false
// }

onMounted(() => {
  // 获取到当前显示状态的视频
  getVideoList(2)
})
</script>
<template>
  <div class="div">
    <!-- 卡片位置 -->
    <el-card class="label">
      <template #header>
        <div class="card">
          <!-- 标题 -->
          <div class="card-header">
            <span style="color: #131f2b;font-weight: bold;">{{ route.query.name }}</span>
          </div>
          <!-- 按钮区域 -->
          <div class="card-rignt">
            <el-upload v-if="route.params.id !== '7'" :headers="headers" :on-success="handleAvatarSuccess"
              :action="uploadPath" :show-file-list="false">
              <!-- 上传的按钮 -->
              <el-button v-permissionDirective type="primary" plain style="width: 100px;margin-left: 1100px;"
                @click="operation">
                <i class="iconfont icon-xinzeng" style="font-size: 14px;"></i>
                <span style="margin-right: 28px;">上传图片</span>
              </el-button>
            </el-upload>
            <div v-else>
              <!-- 上传视频按钮 -->
              <el-button v-permissionDirective type="primary" plain style="width: 100px;margin-left: 1100px;"
                @click="operation">
                <i class="iconfont icon-xinzeng" style="font-size: 14px;"></i>
                <span style="margin-right: 28px;" @click="goToPath">上传视频</span>
              </el-button>
            </div>
          </div>
        </div>
      </template>
      <!-- 视频展示区域 -->
      <el-tabs v-if="route.params.id === '7'" v-model="activeName" type="card" class="demo-tabs"
        @tab-click="handleClick($event, 1)">
        <el-tab-pane label="全部" name="2">
          <el-scrollbar height="460px">
            <!-- 视频盒子 -->
            <div class="list-box" style="margin-left: 20px;">
              <!-- 盒子 -->
              <div class="image-box">
                <!-- 视频位置 -->
                <video @mouseover="mouseover(item)" @mouseout="mouseout" @dblclick="dblclick"
                  @mousedown="startLongPress(item, 2, 6)" @mouseup="stopLongPress" @mouseleave="stopLongPress"
                  @mousemove="resetLongPress"
                  poster="http://127.0.0.1:9000/blog/admin-photo/20240618/0855f3dd8e244cb0bf781ca7e6492252hao1.jpg"
                  preload="none" controls @click="conceal(item, 6)" style="margin-right: 15px;border-radius: 10px;"
                  width="300" height="180" v-for=" item in videoList " :key="item">
                  <!-- 视频路径 -->
                  <source :src="item">
                  <!-- 提供备用的视频 -->
                  <source
                    src="https://img0.baidu.com/it/u=2438360880,1979762032&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1717261200&t=f7b5d0ec1da9071d478b8b5c25459d3a"
                    type="video/webm">
                </video>
              </div>
            </div>
          </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane label="隐藏" name="1">
          <el-scrollbar height="460px">
            <div class="list-box">
              <!-- 盒子 -->
              <div class="image-box">
                <!-- 视频位置 -->
                <video @mousedown="startLongPress(item, 2, 6)" @mouseup="stopLongPress" @mouseleave="stopLongPress"
                  @mousemove="resetLongPress" ref="video"
                  poster="http://127.0.0.1:9000/blog/admin-photo/20240618/0855f3dd8e244cb0bf781ca7e6492252hao1.jpg"
                  preload="none" controls @click="conceal(item, 6)" style="margin-right: 15px;border-radius: 10px;"
                  width="300" height="180" v-for=" item in videoList " :key="item">
                  <!-- 视频路径 -->
                  <source :src="item.photoUrl">
                  <!-- 提供备用的视频 -->
                  <source
                    src="https://img0.baidu.com/it/u=2438360880,1979762032&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1717261200&t=f7b5d0ec1da9071d478b8b5c25459d3a"
                    type="video/webm">
                </video>
              </div>
            </div>
          </el-scrollbar>
        </el-tab-pane>
        <!-- 回收站 -->
        <el-tab-pane label="回收站" name="3">
          <el-scrollbar height="460px">
            <div class="list-box">
              <!-- 盒子 -->
              <div class="image-box">
                <!-- 视频位置 -->
                <video @click="unhide(item, 3, 6)" :poster="item" preload="none" controls
                  style="margin-right: 15px;border-radius: 10px;" width="300" height="180" v-for=" item in videoList "
                  :key="item">
                  <!-- 视频路径 -->
                  <source :src="item">
                  <!-- 提供备用的视频 -->
                  <source
                    src="https://img0.baidu.com/it/u=2438360880,1979762032&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1717261200&t=f7b5d0ec1da9071d478b8b5c25459d3a"
                    type="video/webm">
                </video>
              </div>
            </div>
          </el-scrollbar>
        </el-tab-pane>
      </el-tabs>

      <!-- 如果不等于视频就显示图片 -->
      <!-- tab标签页 -->
      <el-tabs v-else v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick($event, 2)">
        <el-tab-pane label="全部" name="2">
          <el-scrollbar height="460px">
            <div class="list-box">
              <!-- 盒子 -->
              <div class="image-box">
                <el-image :initial-index="index" alt @mousedown="startLongPress(item, 2)" @mouseup="stopLongPress"
                  @mouseleave="stopLongPress" @mousemove="resetLongPress" v-for=" (  item, index  ) in   photoList  "
                  :key="item" @click="conceal(item)" :src="item" lazy loading="lazy" fit="cover">
                </el-image>
              </div>
            </div>
          </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane label="隐藏" name="1">
          <el-scrollbar height="460px">
            <div class="list-box">
              <!-- 盒子 -->
              <div class="image-box">
                <el-image :initial-index="index" alt @mousedown="startLongPress(item, 1)" @mouseup="stopLongPress"
                  @mouseleave="stopLongPress" @mousemove="resetLongPress" v-for=" (  item, index  ) in   photoList  "
                  :key="item" @click="unhide(item, 1)" :src="item" lazy loading="lazy" fit="cover">
                </el-image>
              </div>
            </div>
          </el-scrollbar>
        </el-tab-pane>
        <!-- 回收站 -->
        <el-tab-pane label="回收站" name="3">
          <el-scrollbar height="460px">
            <div class="list-box">
              <!-- 盒子 -->
              <div class="image-box">
                <el-image :initial-index="index" alt v-for=" (  item, index  ) in   photoList  " :key="item"
                  @click="unhide(item, 3)" :src="item" lazy loading="lazy" fit="cover">
                </el-image>
              </div>
            </div>
          </el-scrollbar>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
  <!-- 封面的图片上传的弹层 -->
  <el-dialog title="上传封面" width="300px" v-model="isCover" @close="onClose">
    <!-- 图片上传 -->
    <el-upload :headers="headers"
      style=" height: 160px;width: 160px;border-radius: 4px;border: 1px solid #409eff;margin:10px 0 0 42px;"
      :on-success="handleAvatarSuccessCover" :action="coverUrl" :show-file-list="false">
      <!-- 这里需要做一个判断如果存在则显示图片不存在显示按钮 -->
      <img v-if="coverImage" :src="coverImage" class="avatar" />
      <el-button v-else
        style="background-color: #ffffff;border: none;margin:70px 0px 0px 63px;font-size: 26px;width: 15px;height: 15px;"><span
          style="color: #8597b4;">+</span></el-button>
    </el-upload>
    <!-- 底部操作按钮 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button size="small" @click="onClose">取 消</el-button>
        <!-- 这里不需要提交了 因为我们在上传图片的时候已经存入到数据库中了 -->
        <!-- 这里的按钮都只要关闭就行了 -->
        <el-button size="small" type="primary" @click="onClose" v-permissionDirective>确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped>
.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.label {
  width: 1325px;
  background-color: #fff;
  border: none;
  height: 675px;
  border-radius: 6px;

  .card {
    display: flex;

  }

  .list-box {
    .image-box {
      width: 1300px;
      height: 120px;
      border-radius: 5px;
      display: flex;
      flex-wrap: wrap;

      .el-image {
        width: 120px;
        height: 120px;
        object-fit: cover;
        transition: all 0.3s ease;
        border-radius: 5px;
        /* 每个图片占33.33%宽度，减去间隙，可以根据需要调整 */
        margin: 5px;


      }


    }
  }

}


.img-dialog {
  width: 300px;
  height: 300px;
  object-fit: cover;
}
</style>